<template>
  <div class="Membershipcard">
    <div class="header">
      <!-- <div class="header-1">
        <div class="header-1-1">
          <div class="tou"></div>
          <span>选择会员卡</span>
        </div>
      </div>
      <div class="header-2">
        <div class="header-2-1" v-for="(item, index) in QuerydataList" :key="index" @click="chooseCode()">
          <img :src="QuerydataList.backgroundImageurl" alt="" class="img" />
          <div class="wenzi" v-for="(item, index) in QuerydataList" :key="index">
            <span>{{ item.customerName }}</span><br />
            <span>{{ item.cardCode }}</span><br />    
            <span>有效期：<span>{{ item.invalidDate.split("T")[0] }}</span></span><br />
            <span style="color: #ff0000">距到期：<span></span>{{ item.invalidDateDetail }}</span>
          </div>
        </div>
      </div> 
      <hr size="1" style="color: #00000; border-style: dotted; width: 95%" /> -->
      <!-- 会员信息 -->
      <div class="centre-1">
        <div class="tou"></div>
        <span>会员信息</span>
      </div>
      <div class="centre-2">
        <div class="centre-4">
          <div class="centre-5">
            <span class="centre-5-1"
              >会员姓名:<span class="centre-5-2">{{
                Querydata.cardHolderName
              }}</span></span
            >
            <span class="centre-5-1"
              >会员卡号:
              <span class="centre-5-2">{{ Querydata.cardNumber }}</span></span
            >
            <span class="centre-5-1"
              >开卡时间:<span class="centre-5-2">{{
                Querydata.openCardTime
              }}</span></span
            >
          </div>
          <div class="centre-5">
            <span class="centre-5-1"
              >卡类型:<span class="centre-5-2">{{
                Querydata.cardName
              }}</span></span
            >
            <span class="centre-5-1"
              >卡过期时间:<span class="centre-5-2">{{
                Querydata.expireTime
              }}</span></span
            >
            <span class="centre-5-1"
              >售卡部门:<span class="centre-5-2">{{
                Querydata.orderCreateDeptName
              }}</span></span
            >
            <span class="centre-5-1"
              >售卡员:<span class="centre-5-2">{{
                Querydata.orderCreateAdminName
              }}</span></span
            >
            <!-- <span class="centre-5-1"
            >保险是否开启:<span class="centre-5-2">
              <template>
                <span v-if="(item.guarantee = false)">否</span>
                <span v-if="(item.guarantee = true)">是</span>
              </template>
            </span>
          </span>
          <span class="centre-5-1"
            >是否开票:<span class="centre-5-2">
              <template>
                <span v-if="(item.invoice = false)">否</span>
                <span v-if="(item.invoice = true)">是</span>
              </template>
            </span>
          </span> -->
          </div>
        </div>
      </div>
      <div class="header-1">
        <div class="header-1-1" style="width: 140px">
          <div class="tou"></div>
          <span>正在执行的会员卡</span>
        </div>
      </div>
      <div class="header-2">
        <el-table
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          id="tableTop"
          :data="lstCardingList"
          border
          stripe
          ref="lstCardingList"
          :header-cell-class-name="cellClass"
        >
          <el-table-column type="selection" width="55"  :selectable="selectHandle"> </el-table-column>
          <el-table-column label="购买日期" prop="createTime"></el-table-column>
          <el-table-column label="订单号" prop="orderNumber"></el-table-column>
          <el-table-column
            label="开卡日期"
            prop="openCardTime"
          ></el-table-column>
          <el-table-column
            label="购卡金额"
            prop="actualPayAmount"
          ></el-table-column>
          <el-table-column
            label="预留款"
            prop="reserveAmount"
          ></el-table-column>
          <el-table-column label="金币" prop="goldAmount"></el-table-column>
          <el-table-column
            label="售卡部门"
            prop="orderCreateDeptName"
          ></el-table-column>
          <el-table-column
            label="售卡员"
            prop="orderCreateAdminName"
          ></el-table-column>
          <el-table-column label="操作" width="180px">
            <template>
              <el-button
                @click="toggleSelection(lstCardRecordList)"
                type="primary"
                size="mini"
                >退卡</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="header-1">
        <div class="header-1-1" style="width: 110px">
          <div class="tou"></div>
          <span>未执行会员卡</span>
        </div>
      </div>
      <div class="header-2">
        <el-table
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          id="tableTop"
          :data="lstCardRecordList"
          border
          stripe
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          @select="rufundCodeMethodselect"
          @select-all="rufundCodeMethodselectAll"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="selectabele"
          >
          </el-table-column>
          <el-table-column label="购买日期" prop="createTime"></el-table-column>
          <el-table-column label="订单号" prop="orderNumber"></el-table-column>
          <el-table-column
            label="购卡金额"
            prop="actualPayAmount"
          ></el-table-column>
          <el-table-column
            label="预留款"
            prop="reserveAmount"
          ></el-table-column>
          <el-table-column label="金币" prop="goldAmount"></el-table-column>
          <el-table-column label="售卡部门" prop="deptName"></el-table-column>
          <el-table-column label="售卡员" prop="adminName"></el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.isChoose"
                @click="rufundCodeMethod(scope.$index, scope.row)"
                type="primary"
                size="mini"
                icon="el-icon-delete"
                >退卡</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="header-1">
        <div class="header-1-1" style="width: 110px">
          <div class="tou"></div>
          <span> 应扣费用</span>
        </div>
      </div>
      <div class="header-2">
        <div class="centre-2-4">
          <div class="centre-6">
            <el-form
              class="centre-6-1"
              ref="form"
              :model="sumMoney"
              label-width="110px"
              size="mini"
              id="selectForm"
            >
              <div style="display: flex">
                <el-form-item label="开卡金额">
                  <el-input
                    style="width: 100px"
                    v-model="sumMoney.actualPayAmount"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="预留款金额">
                  <el-input
                    style="width: 100px"
                    v-model="sumMoney.reserveAmount"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="金币金额">
                  <el-input
                    style="width: 100px"
                    v-model="sumMoney.goldAmount"
                    disabled
                  ></el-input>
                </el-form-item>
              </div>
              <div style="width: 100%">
                <el-form-item label="新增退款选项">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="addReturnFreeItem"
                    >添加</el-button
                  >
                </el-form-item>
              </div>

              <el-form-item
                v-for="(item, index) in sumMoney.vipCardRefundItems"
                :key="index"
                :label="'扣减项' + (index + 1) + '、'"
              >
                <el-input
                  style="width: 120px"
                  v-model="item.deductionName"
                  placeholder="请输入扣减项"
                ></el-input>
                :
                <el-input
                  style="width: 100px"
                  v-model="item.deductionAmount"
                  placeholder="请输入金额"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                ></el-input>
                <span style="font-size: 11px"> 扣减项备注：</span>
                <el-input
                  style="width: 320px"
                  v-model="item.deductionRemark"
                  placeholder="请输入扣减项备注"
                ></el-input>
                <i class="el-icon-delete" @click="delReturnFreeItem(index)"></i>
              </el-form-item>
              <div style="width: 100%; display: flex">
                <el-form-item label="应退现金">
                  <el-input
                    style="width: 100px"
                    @change="refundActualAmountChange"
                    v-model="sumMoney.refundActualAmount"
                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  ></el-input>
                </el-form-item>
                <el-form-item label="应退预留款">
                  <el-input
                    style="width: 100px"
                    @change="refundReserveAmountChange"

                    v-model="sumMoney.refundReserveAmount"
                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  ></el-input>
                </el-form-item>
                <el-form-item label="应退金币">
                  <el-input
                    @change="refundGoldAmountChange"
                    style="width: 100px"
                    v-model="sumMoney.refundGoldAmount"
                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>

      <div class="refund">
        <div class="tou"></div>
        <span>退款方式</span>
      </div>
      <div class="refund-1">
        <div class="refund-2">
          <div class="refund-2-1">
            <span>退款方式</span>
            <template>
              <!-- <el-radio
                v-model="sumMoney.refundType"
                label="backtracking"
                >原路退回</el-radio
              > -->
              <el-radio v-model="sumMoney.refundType" label="reserveAmount"
                >退预留款</el-radio
              >
              <el-radio v-model="sumMoney.refundType" label="bankCard"
                >退银行卡</el-radio
              >
            </template>
          </div>
          <div
            v-if="sumMoney.refundmethod == '0'"
            style="margin: 0 0 10px 20px"
          >
            支付方式：
            {{
              Querydata.payType == "Wechat"
                ? "微信"
                : Querydata.payType == "Alipay"
                ? "支付宝"
                : Querydata.payType == "UnionPay"
                ? "银联"
                : Querydata.payType == "UnionPayQRCode"
                ? "银联二维码"
                : Querydata.payType == "BankDebit"
                ? "借记卡"
                : Querydata.payType == "BankCredit"
                ? "信用卡"
                : Querydata.payType == "UnionQRCodePay"
                ? "银联二维码"
                : Querydata.payType == "PhoneSoundPay"
                ? "语音"
                : Querydata.payType == "PresentPay"
                ? "总办赠卡"
                : "暂无支付方式"
            }}<br />
            金额 {{ sumMoney.refundcash }}<br />
            预留款金额： {{ sumMoney.refunddeposit }}
          </div>
          <div class="refund-3" v-if="sumMoney.refundType == 'bankCard'">
            <el-form
              class="refund-3-1"
              ref="form"
              :model="sumMoney"
              label-width="100px"
              size="mini"
            >
              <el-form-item label="开户人名称">
                <el-input
                  placeholder="退银行卡时必填"
                  style="width: 100px"
                  v-model="sumMoney.bankCardName"
                ></el-input>
              </el-form-item>
              <el-form-item label="银行卡卡号">
                <el-input
                  placeholder="退银行卡时必填"
                  style="width: 100px"
                  v-model="sumMoney.bankCardNumber"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户银行" style="width: 200px">
                <el-input
                  placeholder="退银行卡时必填"
                  style="width: 100px"
                  v-model="sumMoney.bankName"
                ></el-input>
                <!-- <el-select
                  clearable
                  v-model="sumMoney.bankName"
                  placeholder="退银行卡时必填"
                >
                  <el-option
                    v-for="item in bankname"
                    :key="item.bankId"
                    :label="item.bankFullName"
                    :value="item.bankId"
                  ></el-option>
                </el-select> -->
              </el-form-item>
              <el-form-item label="开户城市">
                <el-input
                  placeholder="退银行卡时必填"
                  v-model="sumMoney.bankCardCity"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 退款 -->
          <div class="refund-4">
            <div class="refund-4-1">退款原因</div>
            <div class="refund-4-2">
              <el-input
                v-model="sumMoney.refundCause"
                style="width: 268px"
              ></el-input>
            </div>
          </div>
          <!-- 退款原因 -->
          <div class="refund-5">
            <div class="refund-5-1">其他退款原因</div>
            <el-input
              style="width: 168px"
              v-model="sumMoney.refundOtherCause"
              placeholder=""
            ></el-input>
          </div>
        </div>
        <div>
          <div class="refund-6">
            <el-checkbox v-model="isread" @click="ifIsread" :label="false"
              ><span style="font-weight: bolder"> 协议确认：</span>
              <span>请确认您已认真阅读并且同意</span
              ><a @click="gongsimethod()" class="gongsi"
                >《渎失职管理规定知情同意书》</a
              ></el-checkbox
            >
          </div>
          <div class="refund-7">
            <el-button @click="etapplyRefund()" type="primary"
              >立即退卡&nbsp;></el-button
            >
          </div>
        </div>
      </div>

      <!-- 弹窗 -->
      <el-dialog
        title="已提交"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
        :before-close="witeMethod"
      >
        <span>请等待审核</span>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
          <el-button type="primary" @click="witeMethod()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Membershipcard",
  data() {
    return {
      // 查询金额
      isRefundExecuteCard: false,
      // 购卡未执行数组
      lstCardRecordList: [],
      // 正在执行卡的数组
      lstCardingList: [],
      //选中的卡
      multipleSelection: [],
      // 选择是否是未执行卡
      chooseCodeid: 1,
      // 退卡原因
      radioeltable: "",
      forwardvalue: true, //原理退回绑定值
      account: false,
      // 弹窗关闭
      centerDialogVisible: false,
      bankname: [],
      fsadaf: {},
      Querydata: [],
      QuerydataList: [],

      condition: {},

      isread: true,
      hiddenbtn: false,
      sumMoney: {
        actualPayAmount: null,
        reserveAmount: null,
        goldAmount: null,
        vipCardRefundItems: [],
        refundActualAmount: 0,
        refundReserveAmount: 0,
        refundGoldAmount: 0,
        refundType: "reserveAmount",
        refundCause: null,
        refundOtherCause: null,
        // 退银行卡信息
        bankCardName: null,
        bankCardNumber: null,
        bankName: null,
        bankCardCity: null,
      },
    };
  },

  methods: {
    selectHandle(row){
					return false
			},
     cellClass(row){
    if (row.columnIndex === 0) {
     return 'disabledCheck'
    }
},
    // 新增选项
    addReturnFreeItem() {
      let obj = { deductionName: "", deductionAmount: "", deductionRemark: "" };
      this.sumMoney.vipCardRefundItems.push(obj);
    },
    delReturnFreeItem(indexv) {
      this.sumMoney.vipCardRefundItems.splice(indexv, 1);
    },

    // 调用开户行信息接口
    getselectbank() {
      this.$axios.getselectbank({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.bankname = res.data;
          console.log(this.bankname);
        }
      });
    },
    witeMethod() {
      (this.centerDialogVisible = false),
        this.$router.push({
          name: "refundCard",
        });
    },
    // 调用基本信息接口
    etqueryRefuseCardData() {
      this.$axios
        .getRefundUserCard({
          id: this.condition.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.Querydata = res.data.userCardInfo;
            this.lstCardRecordList = res.data.cardOrderBOList;
            this.lstCardRecordList.forEach((item) => {
              item.isChoose = true;
            });

            let obj = res.data.userCardInfo;
            obj.createTime = res.data.cardOrderBO.createTime;
            obj.orderNumber = res.data.cardOrderBO.orderNumber;
            obj.actualPayAmount = res.data.cardOrderBO.actualPayAmount;
            obj.reserveAmount = res.data.cardOrderBO.reserveAmount;
            obj.goldAmount = res.data.cardOrderBO.goldAmount;
            this.lstCardingList.push(obj);
            if (this.lstCardRecordList.length != 0) {
              this.hiddenbtn = false;
            } else {
              this.hiddenbtn = true;
            }
          }
        });
    },
    gongsimethod() {
      window.open(
        "https://emp.ktgj.com/adminpage/#/customer/notification", //需要跳转的路由
        "width=1500,height=800,toolbar=no"
      );
    },
    // 退正在执行的会员卡退卡按钮
    toggleSelection(rows) {
      this.$refs.lstCardingList.toggleRowSelection(this.lstCardingList[0]);
      this.isRefundExecuteCard = !this.isRefundExecuteCard;
      console.log(this.isRefundExecuteCard);
      // console.log(this.isRefundExecuteCard,rows)
      this.$refs.multipleTable.clearSelection();
      if (rows && this.isRefundExecuteCard) {
        rows.forEach((row) => {
          row.isChoose = !row.isChoose;
          this.$refs.multipleTable.toggleRowSelection(row);
        });
        this.getRefundCardMoney();
      } else {
        rows.forEach((row) => {
          row.isChoose = !row.isChoose;
        });
        this.$refs.multipleTable.clearSelection();
        this.getRefundCardMoney();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    selectabele(row) {
      if (!row.isChoose) {
        this.$set(row, "disabled", true);
        return false;
      } else {
        return true;
      }
    },
    // 退未执行的会员卡按钮
    rufundCodeMethod(index, row) {
      console.log(index, row);
      this.hiddenbtn = true;
      this.$refs.multipleTable.toggleRowSelection(row);
      this.getRefundCardMoney();
    },
    rufundCodeMethodselect(index, row) {
      console.log(index, row);
      this.hiddenbtn = true;
      let list = [];
      this.multipleSelection = index;
      index.forEach((item) => {
        list.push(item.taskId);
      });
      this.$axios
        .getRefundCardMoney({
          userCardId: this.Querydata.id,
          isRefundExecuteCard: this.isRefundExecuteCard ? "yes" : "no",
          stayTaskIdList: list,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.sumMoney.actualPayAmount = res.data.actualPayAmount;
            this.sumMoney.reserveAmount = res.data.reserveAmount;
            this.sumMoney.goldAmount = res.data.goldAmount;
          } else {
          }
        });
    },
    rufundCodeMethodselectAll(row) {
      console.log(row);
      this.getRefundCardMoney();
    },
    // 查询退卡金额
    getRefundCardMoney() {
      let list = [];
      this.multipleSelection.forEach((item) => {
        list.push(item.taskId);
      });
      this.$axios
        .getRefundCardMoney({
          userCardId: this.Querydata.id,
          isRefundExecuteCard: this.isRefundExecuteCard ? "yes" : "no",
          stayTaskIdList: list,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.sumMoney.actualPayAmount = res.data.actualPayAmount;
            this.sumMoney.reserveAmount = res.data.reserveAmount;
            this.sumMoney.goldAmount = res.data.goldAmount;
          } else {
          }
        });
    },

    // 退卡申请
    etapplyRefund() {
      let isvipCardRefundItems = true;
      for (let i = 0; i < this.sumMoney.vipCardRefundItems.length; i++) {
        if (
          this.sumMoney.vipCardRefundItems[i].deductionName == "" &&
          this.sumMoney.vipCardRefundItems[i].deductionAmount == ""
        ) {
          isvipCardRefundItems = false;
          break;
        }
      }
      if (this.isRefundExecuteCard || this.multipleSelection.length != 0) {
        if (
          this.sumMoney.refundActualAmount != null &&
          this.sumMoney.refundReserveAmount != null &&
          this.sumMoney.refundGoldAmount != null
        ) {
          if (isvipCardRefundItems) {
            if (this.sumMoney.refundType == "bankCard") {
              if (
                this.sumMoney.bankCardName != null &&
                this.sumMoney.bankCardNumber != null &&
                this.sumMoney.bankName != null &&
                this.sumMoney.bankCardCity != null
              ) {
                this.refundCardMoney();
              } else {
                this.$message({
                  message: "请填写退款银行卡信息",
                  type: "warning",
                });
              }
            } else {
              this.refundCardMoney();
            }
          } else {
            this.$message({
              message: "扣减项名称与扣减项金额为必填项",
              type: "warning",
            });
          }
        } else {
          this.$message({
            message: "请填写应退现金、预留款、金币",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请选择要退的卡",
          type: "warning",
        });
      }
    },
    refundCardMoney() {
      let list = [];
      this.multipleSelection.forEach((item) => {
        list.push(item.taskId);
      });
      this.$axios
        .refundCardMoney({
          userCardId: this.Querydata.id,
          isRefundExecuteCard: this.isRefundExecuteCard ? "yes" : "no",
          stayTaskIdList: list,
          actualPayAmount: this.sumMoney.actualPayAmount,
          reserveAmount: this.sumMoney.reserveAmount,
          goldAmount: this.sumMoney.goldAmount,
          vipCardRefundItems: this.sumMoney.vipCardRefundItems,
          refundActualAmount: this.sumMoney.refundActualAmount,
          refundReserveAmount: this.sumMoney.refundReserveAmount,
          refundGoldAmount: this.sumMoney.refundGoldAmount,
          refundType: this.sumMoney.refundType,
          bankCardName: this.sumMoney.bankCardName,
          bankCardNumber: this.sumMoney.bankCardNumber,
          bankName: this.sumMoney.bankName,
          bankCardCity: this.sumMoney.bankCardCity,
          refundCause: this.sumMoney.refundCause,
          refundOtherCause: this.sumMoney.refundOtherCause,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.centerDialogVisible = true;
          } else {
          }
        });
    },
    ifIsread() {
      this.isread = !this.isread;
      console.log(this.isread);
    },
    // 计算退费金额
    refundActualAmountChange(){
      if((this.sumMoney.refundActualAmount+this.sumMoney.refundReserveAmount+this.sumMoney.refundGoldAmount)>(this.sumMoney.actualPayAmount+this.sumMoney.reserveAmount+this.sumMoney.goldAmount)){
          this.$message({
            message: "退款金额不可大于开卡金额",
            type: "warning",
          });
        this.sumMoney.refundActualAmount = 0
      }
    },
     // 计算退费金额
    refundReserveAmountChange(){
      if((this.sumMoney.refundActualAmount+this.sumMoney.refundReserveAmount+this.sumMoney.refundGoldAmount)>(this.sumMoney.actualPayAmount+this.sumMoney.reserveAmount+this.sumMoney.goldAmount)){
          this.$message({
            message: "退款金额不可大于开卡金额",
            type: "warning",
          });
        this.sumMoney.refundReserveAmount = 0
      }
    },
     // 计算退费金额
    refundGoldAmountChange(){
      if((this.sumMoney.refundActualAmount+this.sumMoney.refundReserveAmount+this.sumMoney.refundGoldAmount)>(this.sumMoney.actualPayAmount+this.sumMoney.reserveAmount+this.sumMoney.goldAmount)){
          this.$message({
            message: "退款金额不可大于开卡金额",
            type: "warning",
          });
        this.sumMoney.refundGoldAmount = 0
      }
    }
  },
  mounted() {
    this.getselectbank();
    this.condition = this.$route.params.fsadaf;
    this.etqueryRefuseCardData();
  },
};
</script>
<style scoped>
.header {
  width: 800px;
  margin: auto;
  background-color: #ffffff;
}
.header-1 {
  text-align: left;
  margin-left: 20px;
  padding-top: 20px;
}
.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 2px;
}
.header-1-1 {
  width: 100px;
  height: 40px;
  /* background-color: #f06f2d; */
  font-weight: bolder;
  display: flex;
}
.header-2 {
  text-align: left;
  margin-left: 20px;
  display: flex;
  margin-bottom: 15px;
}

.header-2-1 {
  width: 262px;
  height: 88px;
  margin-right: 20px;
  display: flex;
  border: 2px solid #2f80ed;
  cursor: pointer;
}

.header-2-2 {
  width: 262px;
  height: 88px;
  border: 2px solid #000000;
  display: flex;
}

.wenzi {
  font-size: 10px;
  margin-left: 10px;
  margin-top: 8px;
}

.centre-1 {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
  font-weight: bolder;
}

.centre-2 {
  /* flex-wrap: wrap; */
  margin-left: 20px;
}

.centre-2-1 {
  height: 76px;
}

.centre-2-2 {
  width: 188px;
  min-height: 285px;
  margin-left: 10px;
}

/* 应扣费用 */
.centre-2-3 {
  margin-bottom: 20px;
  font-weight: bolder;
  margin-top: 10px;
  display: flex;
}

.centre-2-4 {
  /* background-color: #f7f6f9; */
}

.centre-6-1 {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  /* margin-top: 20px; */
  background-color: #f7f6f9;

  padding-top: 10px;
}
.centre-4 {
  background-color: #f7f6f9;
  padding: 10px 0 10px 0;
}

.centre-5 {
  margin-left: 40px;
  margin-top: 15px;
  font-size: 11px;
}

#selectForm >>> .el-form-item__label {
  font-size: 11px;
}

.centre-5-1 {
  margin-right: 45px;
}

.centre-5-2 {
  margin-left: 10px;
}

.refund {
  margin-left: 20px;
  margin-bottom: 15px;
}

.img {
  width: 120px;
  height: 72px;
  /* background-color: #000000; */
  margin-top: 8px;
  margin-left: 8px;
}

.img-1 {
  width: 164px;
  height: 98px;
  background-color: #000000;
  margin: auto;
  margin-top: 10px;
}

.img-1-1 {
  margin-left: 12px;
  margin-top: 5px;
}

.img-1-1 :nth-of-type(1) {
  font-size: 12px;
  font-weight: bolder;
}

.img-1-1 :nth-of-type(2) {
  font-size: 8px;
}

.img-1-2 {
  width: 88%;
  height: 1px;
  border-top: 1px solid #e0e0e0;
  margin: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}

.img-1-3 {
  font-size: 8px;
  margin-left: 12px;
  line-height: 25px;
}

.img-1-4 {
  font-weight: bolder;
  margin-left: 70px;
}

.img-1-5 {
  display: flex;
  flex-direction: row-reverse;
  margin-right: 12px;
  margin-top: 20px;
}

.img-1-5 :nth-of-type(1) {
  font-size: 20px;
  color: #f06f2d;
  font-weight: bolder;
}

.img-1-5 :nth-of-type(2) {
  margin-top: 8px;
  font-size: 8px;
  text-decoration: underline;
}

/* 退款方式 */
.refund {
  font-weight: bolder;
  margin-top: 35px;
  margin-bottom: 20px;
  display: flex;
}

.refund-2 {
  background-color: #f7f6f9;
  margin-left: 20px;
}

.refund-3-1 {
  display: flex;
  flex-wrap: wrap;
}

.refund-2-1 {
  margin-left: 25px;
  margin-top: 15px;
  font-size: 11px;
  margin-bottom: 10px;
  padding-top: 20px;
}

.refund-2-1 span {
  margin-right: 18px;
}

.refund-4 {
  display: flex;
  flex-wrap: nowrap;
}

.refund-4-1 {
  margin-right: 20px;
  margin-left: 20px;
  font-size: 11px;
}

.refund-4-2 {
  font-size: 11px;
  color: #000000;
}

.refund-5 {
  margin-top: 10px;
  display: flex;
  padding-bottom: 20px;
}

.refund-5-1 {
  width: 50px;
  margin-right: 20px;
  margin-left: 20px;
  font-size: 11px;
}

.refund-6 {
  margin-left: 20px;
  margin-top: 30px;
}

.refund-7 {
  text-align: center;
  margin: 20px 0;
}

.gongsi {
  color: #2f80ed;
  text-decoration: none;
}
/* 去掉全选按钮 */
::v-deep.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important;
}
::v-deep.el-table .disabledCheck .cell::before{
    content: '';
    text-align: center;
    line-height: 37px;
}
</style>